<template>
    <div>
        <el-button type="primary" style="margin-bottom: 10px;" size="medium" @click="handleAddVisible">新增</el-button>
        <el-table :data="typeData" border :header-cell-style="headerStyleEvent">
            <el-table-column prop="materialCategoryName" label="所属种类" align="center"></el-table-column>
            <el-table-column prop="thresholdManageTypeLabel" label="阈值管理方式" align="center"></el-table-column>
            <el-table-column prop="typeSpecification" label="类型/规格" align="center"></el-table-column>
            <el-table-column prop="typeDesc" label="描述说明" align="center"></el-table-column>
            <el-table-column prop="thresholdManageValue" label="使用阈值" align="center"></el-table-column>
            <el-table-column prop="maxManageValue" label="使用最大值" align="center"></el-table-column>
            <el-table-column prop="totalUsedQtyValue_forScrap" label="总使用报废值" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="140px">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="isEdit ? '编辑类型/规格' : '新增类型/规格'" :visible.sync="dialogVisible" width="40%">
            <el-form ref="form" :model="formmodel" label-width="139px" :rules="rules">
                <el-form-item label="种类" prop="materialCategoryId">
                    <commonSelect v-model="formmodel.materialCategoryId" style="width: 100%;" :list="categoryList"
                        :placeholder="'请选择种类'">
                    </commonSelect>
                    <el-tag type="warning" style="white-space:break-spaces;height:auto;line-height:1.5em;">
                        [如果选择的是不进行阈值管理的种类，对应的阈值和最大值设置将无效]
                    </el-tag>
                </el-form-item>
                <el-form-item label="类型/规格" prop="typeSpecification">
                    <el-input v-model="formmodel.typeSpecification"></el-input>
                </el-form-item>
                <el-form-item label="使用阈值" prop="thresholdManageValue">
                    <el-input v-model="formmodel.thresholdManageValue" ></el-input>
                    <el-tag type="warning" style="white-space:break-spaces;height:auto;line-height:1.5em;">
                        [如果不指定，将使用其所属种类的阈值]
                    </el-tag>
                </el-form-item>
                <el-form-item label="使用最大值" prop="maxManageValue">
                    <el-input v-model="formmodel.maxManageValue" ></el-input>
                    <el-tag type="warning" style="white-space:break-spaces;height:auto;line-height:1.5em;">
                        [如果不指定，将使用其所属种类的最大值]
                    </el-tag>
                </el-form-item>
                <el-form-item label="总使用量的报废值" prop="totalUsedQtyValue_forScrap">
                    <el-input v-model="formmodel.totalUsedQtyValue_forScrap" ></el-input>
                    <el-tag type="warning" style="white-space:break-spaces;height:auto;line-height:1.5em;">
                        [总使用次数/时间，超过该值应该报废处理]
                    </el-tag>
                </el-form-item>
                <el-form-item label="类型/规格说明" prop="typeDesc">
                    <el-input v-model="formmodel.typeDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="isEdit ? handleUpdateType() : handleAddType()">确
                    定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import commonSelect from '@/components/commonSelect.vue';
import { setMaterielCTCategory,fetchGoodTypeSelect, fetchGoodCategorySelect, fetchGoodAddTypes, fetchGoodUpdateTypes } from '@/network/MaterialCategoryType'
export default {
    name: '',
    props: {},
    components: { commonSelect },
    data() {
        return {
            dialogVisible: false,
            isEdit: false,
            typeData: [],
            categoryList: [],
            formmodel: {
                materialCategoryId: '',
                typeSpecification: '',
                typeDesc: '',
                thresholdManageValue: null,
                maxManageValue: null,
                totalUsedQtyValue_forScrap: null,
            },
            rules: {
                materialCategoryId: [{ required: true, message: '请选择种类', trigger: 'change' }],
                typeSpecification: [{ required: true, message: '请输入类型规格', trigger: 'blur' }],
                thresholdManageValue: [{ pattern:/^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入正确的值', trigger: 'blur' }],
                maxManageValue: [{ pattern:/^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入正确的值', trigger: 'blur' }],
                totalUsedQtyValue_forScrap: [
                    { pattern:/^(0|[1-9]\d*)(\.\d+)?$/, message: '请输入正确的值', trigger: 'blur' }
                ],
            }
        }
    },
    mounted() {
        setMaterielCTCategory(this.$route.meta.materielCTCategory)

        this.getTypeData()
        this.getCategorySelect()
    },
    methods: {
        async getTypeData() {
            try {
                const res = await fetchGoodTypeSelect()
                this.typeData = res.data
                console.log(res);

            } catch (error) {
                console.log(error);
            }
        },
        async getCategorySelect() {
            try {
                const res = await fetchGoodCategorySelect()
                this.categoryList = res.data.map(item => ({
                    id: item.id,
                    name: item.categoryName,
                }));
            } catch (error) {
                console.log(error);
            }
        },
        handleAddVisible() {
            this.dialogVisible = true
            this.isEdit = false
            this.formmodel = {
                materialCategoryId: '',
                typeSpecification: '',
                typeDesc: '',
                thresholdManageValue: null,
                maxManageValue: null,
                totalUsedQtyValue_forScrap: null,
            }
        },
        headerStyleEvent() {
            return { background: '#eef1f6', color: '#606266' }
        },
        handleEdit(row) {
            this.isEdit = true
            this.dialogVisible = true
            this.formmodel = { ...row }
        },
        async handleUpdateType() {
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    try {
                        const res = await fetchGoodUpdateTypes(this.formmodel)
                        if (res.status == 200) {
                            this.$message({
                                message: '编辑成功',
                                type: 'success'
                            });
                            this.dialogVisible = false
                            this.getTypeData()
                            this.$refs['form'].resetFields();
                        }
                    } catch (error) {
                        console.log(error);
                    }
                } else {
                    console.log('提交失败');
                    return false;
                }
            });
        },
        // validateNohold() {
        //     const value = this.formmodel.thresholdManageValue;
        //     if (!/^(0|[1-9]\d*)$/.test(value)) {
        //         this.formmodel.thresholdManageValue = null;
        //     }
        // },
        // validateNoMax() {
        //     const value = this.formmodel.maxManageValue;
        //     if (!/^(0|[1-9]\d*)$/.test(value)) {
        //         this.formmodel.maxManageValue = null;
        //     }
        // },
        async handleAddType() {
            this.$refs['form'].validate(async (valid) => {
                if (valid) {
                    try {
                        const res = await fetchGoodAddTypes(this.formmodel)
                        if (res.status == 200) {
                            this.$message({
                                message: '新增成功',
                                type: 'success'
                            });
                            this.dialogVisible = false
                            this.getTypeData()
                            this.$refs['form'].resetFields();
                        }
                    } catch (error) {
                        console.log(error);
                    }
                } else {
                    console.log('提交失败');
                    return false;
                }
            });
        }
    }
}
</script>
<style scoped></style>